<template>
  <div>
    <footer>
      <nav class="footerNav">
        <van-tabbar v-model="active" active-color="red">
          <router-link
            v-for="item in footerNav"
            :key="item.id"
            :to="item.path"
            style="flex-grow:1;"
          >
            <van-tabbar-item :icon="item.img">{{item.title}}</van-tabbar-item>
          </router-link>
        </van-tabbar>
      </nav>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 底部导航小图标

      footerNav: [
        {
          id: 1,
          path: "/",
          title: "首页",
          img: "home-o"
        },
        {
          id: 2,
          path: "/sort",
          title: "分类",
          img: "search"
        },
        {
          id: 3,
          path: "/cart",
          title: "购物车",
          img: "shopping-cart-o"
        },
        {
          id: 4,
          path: "/mine",
          title: "个人中心",
          img: "manager-o"
        }
      ],
      active: 0
    };
  },

  components: {},

  methods: {}
};
</script>

<style scoped>
/* 底部样式 */
.footerNav {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
  background: rgb(255, 255, 255);
  display: flex;
  text-align: center;
  z-index: 999;
  border-top: 3px solid rgb(221, 221, 221);
  align-items: flex-start;
  padding-top: 10px;
}
</style>